<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>controller</title>
    <link rel="stylesheet" href="../lib/bootstrap3/css/bootstrap.min.css">
    <script src="../lib/jquery/jquery-1.10.2.js"></script>
    <script src="../lib/angularjs/angular.min.js"></script>
    <style>
        body{padding:50px 200px;}
    </style>
    <script>
        var app=angular.module("app01",[]);
    </script>
</head>
<body ng-app="app01">
<h3>编译函数负责对模板dom进行转换，链接函数负责作用域与dom进行链接</h3>
<DIV CLASS="panel panel-success">
    <div class="panel-heading">例子一(good的控制器跟hello的控制器进行通信,beautiful又可以跟同级的good通信)</div>
    <div class="panel-body">
        <div>
            <hello>
                <div>hello</div>
                <beautiful good>
                    beautiful
                </beautiful>
            </hello>
        </div>
    </div>
    <script>
        app.directive("hello",function(){
            return {
                restrict : "E",
                controller : function($scope){
                    $scope.name = "张三";
                    this.information = {
                        name : $scope.name,
                        age : 25,
                        job : "程序员"
                    }
                },
                link : function(scope){

                }
            }
        });
        app.directive("beautiful",function(){
            return {
                restrict : "E",
                require : "?good",
                controller : function(){
                    this.name = "beautiful";
                },
                link : function (scope,element,attrs,good) {
                    console.log(good.name)
                }
            }
        });
        app.directive("good",function(){
            return {
                restrict : "A",
                require : "?^hello",
                controller : function(){
                    this.name = "good";
                },
                link : function (scope,element,attrs,hello) {
                    console.log(hello.information)
                }
            }
        });
    </script>
    <div class="panel-footer">
        <h4>require的作用是为了让父子指令或者兄弟指令的controller之间搭建一个桥梁</h4>
        <h4>也就是说父指令里的controller里面的数据能分享给子指令的controller</h4>
        <h4>其中子指令的link第四个参数的值是父指令的controller对象的作用域上下文</h4>
        <h4>require有两个修饰符号:”?”、”^”</h4>
        <h4>? : 如果require没有找到相应的指令避免报错,还能确保程序的正常执行</h4>
        <h4>^ : 表示往父级查找</h4>
    </div>
</DIV>
</body>
</html>